<template>
  <div class="todo-item">
    <label>
      <input
        type="checkbox"
        v-model="state"
        @change="$emit('change-state', state)"
      />
      <span class="check-button"></span>
      <span :class="{ completedClass: state }"><slot></slot></span>
    </label>
  </div>
</template>

<script>
export default {
  props: {
    completed: Boolean
  },
  data() {
    return {
      state: this.completed
    };
  }
};
</script>

<style lang="scss">
.todo-item {
  &:not(:first-child) {
    margin-top: 14px;
  }

  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  color: #626262;

  label {
    position: relative;
    display: flex;
    align-items: center;

    .completedClass {
      text-decoration: line-through;
      font-style: italic;
    }

    span.check-button {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);

      &::before,
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
      }

      &::before {
        border: 1px solid #b382f2;
      }

      &::after {
        background-color: #b382f2;
        transform-origin: center center;
        transform: scale(0.8);
        transition: 0.8s;
        opacity: 0;
      }
    }

    input {
      margin-right: 16px;
      opacity: 0;

      &:checked + span.check-button::after {
        opacity: 1;
      }
    }
  }
}
</style>
